<style scoped lang="less">
.census-main {
    padding: 20px;
    margin-left: 0;
}
</style>
<template>
    <div class="page-census page-setting">
        <div class="crumbs">
            <router-link to="/">首页</router-link> / <span class="active">{{ title }}</span>
        </div>
        <div class="census-main" :style="{ height: mainH + 'px' }">
            <div class="opers flex v-c">
                <el-form :inline="true" class="filter-blk flex-1">
                    <el-form-item label="设备名称">
                        <el-input
                            placeholder="请输入设备名称"
                            v-model.trim="filterForm.name"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="ml-20" label="设备编号">
                        <el-input
                            placeholder="请输入设备编号"
                            v-model.trim="filterForm.number"
                        ></el-input>
                    </el-form-item>
                    <!-- <el-form-item class="ml-20" label="安装时间">
                        <el-date-picker
                            v-model="datetimeRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width:100%"
                        >
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="searchAction"
                            ><i class="iconfont icon-search"></i> 查询</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="dataList" style="width: 100%" v-loading="loading">
                <el-table-column prop="number" label="设备编号"></el-table-column>
                <el-table-column prop="name" label="设备名称"></el-table-column>
                <el-table-column prop="deviceTypeName" label="设备类型"></el-table-column>
                <el-table-column prop="position" label="安装位置"></el-table-column>
                <el-table-column prop="installtime" label="安装时间"></el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <div class="nowrap">
                            <el-button
                                :disabled="!$store.getters.hasEditPermission"
                                type="primary"
                                @click="showSwitch(scope.row)"
                            >
                                开关列表
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-if="total > 0"
                class="text-right mt-20 mr-20"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, total, jumper"
                :total="total"
            >
            </el-pagination>
        </div>

        <!-- 开关列表 -->
        <SwitchList
            v-if="switchModalVisible"
            :visible.sync="switchModalVisible"
            :activeDevice="activeData"
            :editable="false"
        ></SwitchList>
    </div>
</template>
<script>
import { mapState } from "vuex"
import SwitchList from "@/components/switch/list.vue"
export default {
    name: "switchManage",
    components: {
        SwitchList,
    },
    props: {
        winH: {
            type: Number,
            default: 500,
        },
    },
    data() {
        return {
            title: this.$route.query.title || "开关量监测",
            datetimeRange: [],
            filterForm: {},
            loading: false,
            total: 0,
            currentPage: 1,
            pageSize: 8,
            loading: false,
            dataList: [],
            activeData: null,
            switchModalVisible: false,
        }
    },
    computed: {
        ...mapState(["siteInfos"]),
        mainH() {
            return this.winH - 180
        },
    },
    created() {
        this.getData(1)
    },
    methods: {
        getData(page) {
            this.loading = true
            let params = Object.assign(
                {
                    page: page,
                    limit: this.pageSize,
                    deviceClassify: 19,
                },
                this.filterForm
            )

            this.$get("/fireFightingIOT/device/deviceListPage", params).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    if (data) {
                        this.currentPage = page
                        this.total = data.totalSize
                        this.dataList = data.Items
                    }
                },
                (err) => {
                    this.loading = false
                    this.currentPage = page
                    this.total = 0
                    this.dataList = []
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        searchAction() {
            this.getData(1)
        },
        handleCurrentChange(page) {
            this.getData(page)
        },

        getDataById(id, cbk) {
            this.$get("/fireFightingIOT/device/detail", {
                id: id,
                deviceClassify: 19,
            }).then(
                (res) => {
                    let thisData = res.data
                    cbk && cbk(thisData)
                },
                (err) => {
                    //
                }
            )
        },
        showSwitch(item) {
            this.activeData = item
            this.switchModalVisible = true
        },
    },
}
</script>
